<template>
  <div class="box">
    <van-nav-bar title="购物车"  class="nav"/>
    <van-checkbox-group v-model="result" class="nav1" ref="checkboxGroup">
    <van-row v-for="item in $store.state.shoplist" :key="item.id">
      <van-col span="3"
          ><van-checkbox class="ch" :name="item" @click="change" ></van-checkbox
        ></van-col>
      <van-col span="21">
        <van-swipe-cell>
          <van-card
            :price="item.parice"
            :desc="item.desc"
            :title="item.title"
            class="goods-card"
            :thumb="item.img"
          >
            <template #footer>
              <van-stepper
                v-model="item.num"
                @plus="jia(item.id)"
                @minus="jian(item.id)"
                theme="round"
                button-size="22"
                disable-input
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              @click="del(item.id)"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </van-col>
    </van-row>
        </van-checkbox-group>
    <van-submit-bar class="w1" :price="sum*100" button-text="提交订单">
      <van-checkbox v-model="checked" @click="checkall">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      result:[],
      checked:false,
    }
  },
  methods:{
    // 调用加方法
    jia(id){
      this.$store.commit('jia',id)
    },
    // 调用减方法
    jian(id){
      this.$store.commit('jian',id)
    },
    // 调用删除方法
    del(id){
       this.$store.commit("del",id)
    },
    // 全选
    change(){
   if(this.$store.state.shoplist.length==this.result.length){
     this.checked=true;
   }else{
     this.checked=false;
   }
    },
    checkall(){
     this.$refs.checkboxGroup.toggleAll(this.checked);
  }
},
// 计算总价
computed:{
  sum(){
    let  res=0;
    this.result.forEach((item)=>{
      res+=item.num*item.parice;
    })
    return res;
  }
}
}
</script>
<style  scoped>
.goods-card {
  margin: 0;
  background-color: lightcyan;
  margin-top: 10px;
}

.delete-button {
  height: 100%;
}
.ch {
  margin-top: 50px;
  margin-left: 10px;
}
.w1 {
 position: fixed;
  height: 64px;
  line-height: 64px;
  bottom: 67px;
}
 .box{
    margin-bottom: 140px;
  }
  .nav{
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
  }
  .nav1{
    margin-top: 50px;
  }
</style>